<template>
  <div id="Dispatch">
    <div class="spinner" v-show="spinner">
      <div class="bounce1"></div>
      <div class="bounce2"></div>
      <div class="bounce3"></div>
    </div> 
    <div class="ge"></div>
    <div v-for="item in Content">
        <div class="contentTwo-head">
            <div>
                <div class="contentTwo-left"><span></span></div>
                <div class="contentTwo-right">               
                    <span>发文通知</span>
                </div>
                <br />
            </div>
            <div>
                <div class="contentTwo-name"><span class="contentTwo-text">{{item.DOCUMENT_TITTLE | dateEmpty}}</span></div>
                <br />
            </div>
            <div>
                <div class="lie-left">通知人员：</div>
                <div class="lie_right"><span>{{item.STAFF_NAME | dateEmpty}}</span></div>
                <br />
            </div>					
            <div>
                <div class="lie-left">通知时间：</div>
                <div class="lie_right"><span>{{item.OPERATE_DATE | dateEmpty}}</span></div>
                <br />
            </div>                 
        </div>  
        <p class="commodityP">公文内容</p>
        <div class="content">
            <p>&nbsp;&nbsp;{{item.DOCUMENT_CONTENT | dateEmpty}}</p>
        </div>  
    </div>
    <div v-show="browse">
        <p class="commodityP">浏览记录</p>
        <div class="content">
            <div class="browse" v-for="(item,i) in ContentBrowse" :key="i">
                <p>{{i+1}}.</p>
                <p>浏览人员：{{item.STAFF_NAME | dateEmpty}}</p>
                <p>浏览时间：{{item.DOCUMENT_BROWSER | dateEmpty}}</p>
                <p>下载时间：{{item.DOCUMENT_DOWNLOAD | dateEmpty}}</p>
                <hr />
            </div>
        </div>         
    </div>    
    <div v-show="download">
        <p class="commodityP">下载记录</p>
        <div class="content">
            <div class="browse" v-for="(item,i) in ContentDownload" :key="i">
                <p>{{i+1}}.</p>
                <p>下载人员：{{item.STAFF_NAME | dateEmpty}}</p>
                <p>下载时间：{{item.OPERATE_DATE | dateEmpty}}</p>
                <hr />
            </div>        
        </div>          
    </div>
    
  </div>
</template>

<script>
import store from "@/store/store.js";
export default {
  name: "Dispatch",
  data() {
    return {
      Url:
        "http://mall.eshangtech.com:8010/MobileServicePlatform/Handler/handler_ajax.ashx?",
      Content: [],
      ContentBrowse: [],
      ContentDownload: [],
      spinner: true,
      browse: false,
      download: false
    };
  },
  methods: {
    getData: function() {
      this.$http
        .get(
          this.Url +
            "action_type=GetDocumentInfo&action_data=" +
            this.$route.params.id +
            "&action_record=" +
            store.state.wxid +
            "&DOCUMENT_TYPE=1000"
        )
        .then(response => {
          // success callback
          this.spinner = false;
          this.Content = response.data.Document;
        })
        .catch(error => {
          // console.log(error);
        });
    },
    //浏览记录
    getBrowse: function() {
      this.$http
        .get(
          this.Url +
            "action_type=GetDocumentInfo&action_data=" +
            this.$route.params.id +
            "&action_record=" +
            store.state.wxid +
            "&DOCUMENT_TYPE=2000"
        )
        .then(response => {
          // success callback
          this.ContentBrowse = response.data.Document;
          if (this.ContentBrowse.length > 0) {
            this.browse = true;
          }
        })
        .catch(error => {
          // console.log(error);
        });
    },
    //下载记录
    getDownload: function() {
      this.$http
        .get(
          this.Url +
            "action_type=GetDocumentInfo&action_data=" +
            this.$route.params.id +
            "&action_record=" +
            store.state.wxid +
            "&DOCUMENT_TYPE=3000"
        )
        .then(response => {
          // success callback
          this.ContentDownload = response.data.Document;
          if (this.ContentDownload.length > 0) {
            this.download = true;
          }
        })
        .catch(error => {
          // console.log(error);
        });
    }
  },
  created() {
    this.getData();
    this.getBrowse();
    this.getDownload();
  }
};
</script>

<style scoped>
.ge {
  padding: 2.5rem 0 0 0;
}
.contentTwo-head {
  width: 100%;
  margin: 0.5rem 0 0 0;
  padding: 0.5rem 0.5rem 0.5rem 1rem;
  background-color: #fff;
  position: relative;
}
.contentTwo-left {
  width: 60%;
  float: left;
  height: 1.5rem;
  line-height: 1.5rem;
}
.contentTwo-right {
  width: 40%;
  float: left;
  height: 1.5rem;
  line-height: 1.5rem;
  text-align: right;
  padding-right: 1rem;
}
.contentTwo-name {
  float: left;
  height: 1.5rem;
  line-height: 1.5rem;
}
.contentTwo-text {
  font-size: 20px;
  color: #ec9061;
}
.lie-left {
  width: 18%;
  float: left;
  height: 1.5rem;
  line-height: 1.5rem;
}
.lie_right {
  width: 82%;
  float: left;
  height: 1.5rem;
  line-height: 1.5rem;
}
.lie_right2 {
  width: 82%;
  float: left;
  line-height: 1.5rem;
}
.content {
  width: 100%;
  padding: 0.5rem;
  background-color: #fff;
}
.commodityP {
  color: #b7b8ba;
  padding: 0.5rem;
}
.browse {
  padding: 0 0.5rem 0 0.5rem;
  margin-bottom: 0.5rem;
}
</style>

